<template>
  <div class="content">
    <!--    数据字典公共列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('menu.technologyList')"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div>
        <div class="materiel-form">
          <el-input v-model.trim="fnumber" class="input-width" size="mini" placeholder="请输入物料编码" @keyup.enter.native="getBasicUnit" />
          <el-input v-model.trim="fmodel" class="input-width" size="mini" placeholder="请输入助记码" @keyup.enter.native="getBasicUnit" />
          <el-input v-model.trim="fconnectmodel" class="input-width" size="mini" placeholder="请输入相连型号" @keyup.enter.native="getBasicUnit" />
          <el-input v-model.trim="fpart" class="input-width" size="mini" placeholder="请输入部件" @keyup.enter.native="getBasicUnit" />
          <el-button size="mini" type="primary" @click="getBasicUnit">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="53vh"
          serial
          @clickRow="clientlSelectRow"
        />
      </div>
      <!--    分页器-->
      <div class="footer">
        <jc-pagination
          :total="total"
          :page.sync="currentPage"
          :limit.sync="size"
          @pagination="getBasicUnit"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryProcessTemplates } from '@/api/marketManage/marketOrder'

export default {
  props: {
    fmodel: {
      type: String,
      default: ''
    },
    fpart: {
      type: String,
      default: ''
    },
    fnumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      fconnectmodel: '',
      isclientlDialog: true,
      tableData: [],
      tableHeader: [
        { label: this.$t('market.craftnumber'), prop: 'fnumber', minWidth: '110px' },
        { label: this.$t('market.fcraftname'), prop: 'fname', minWidth: '100px' },
        { label: this.$t('market.deaprt'), prop: 'fdeptName', minWidth: '110px' },
        { label: this.$t('market.fmodel2'), prop: 'fmodel', minWidth: '110px' },
        { label: this.$t('market.fconnectmodel'), prop: 'fconnectmodel', minWidth: '110px' },
        { label: this.$t('market.fpart'), prop: 'fpart', minWidth: '110px' },
        { label: this.$t('market.totalAmount'), prop: 'totalSumPrice', minWidth: '110px' },
        { label: this.$t('market.createDate'), prop: 'fcreateTime', minWidth: '125px' }
      ],
      prodValue: { fcustId: '', fname: '', isclientlDialog: true }
    }
  },
  created() {
    this.getBasicUnit()
  },
  methods: {
    // 基本单位
    async getBasicUnit() {
      const DATA = {
        pageNum: this.currentPage, pageSize: this.size,
        fpart: this.fpart,
        fnumber: this.fnumber,
        search: [
          { field: 'fmodel', seach: this.fmodel, fid: 7 },
          { field: 'fconnectmodel', seach: this.fconnectmodel, fid: 7 }
        ]
      }
      const { data: RES } = await queryProcessTemplates(DATA)
      this.tableData = RES.list
      this.total = RES.total
    },
    // 单位选中
    clientlSelectRow(item) {
      this.prodValue = item
      this.$emit('unit', this.prodValue)
    },
    // 关闭前回调
    handleClose() {
      this.prodValue.isclientlDialog = false
      this.$emit('unit', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
